<template>
  <div class="taskBox">
    <div style="margin-top: 20px;" v-for="(task,index) in assessInfo.task" :key="index">
      <p style="font-size: 24px;font-weight: 600;">{{task.category}}</p>
      <p style="margin-left: 10px;margin-top: 10px;">{{index+1+'.'+task.taskName}}</p>
      <el-form label-position="top" style="margin-top: 20px;margin-left: 30px;width: 60%;" >
        <!-- <el-form-item :label="'('+(ansindex+1)+')'+'.'+taskItem.content" v-for="(taskItem , ansindex) in task.children" >
          <el-input readonly placeholder="未输入" v-if="answerInfoList.length>0" v-model="answerInfoList[index][Object.keys(answerInfoList[index])[ansindex]]"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-input-number onkeydown="if (event.keyCode===13){return false;}" :max="task.score" :disabled='readonly' :min="0" controls-position="right" placeholder='请输入您的自评分数' style="width: 40%;" v-model.number="answerInfoList[index].score"></el-input-number>
        </el-form-item>
        <el-form-item style="margin-top: 20px;" v-if="task.isFile==1&&task.isExtend==1">
          <el-table
              ref="multipleTable"
              :data="answerInfoList[index].resultExtends"
              tooltip-effect="dark"
              style="width: 100%"
              >
              <el-table-column
                label="等级"
                width="120"
                prop='itemType'
                >
              </el-table-column>
              <el-table-column
                label="名称"
                width="180"
                prop='itemName'
                >
              </el-table-column>
              <el-table-column
                label="评分"
                width="150"
                prop="score"
                >
              </el-table-column>
              <el-table-column
                label="备注"
                prop='note'
                >
              </el-table-column>
            </el-table>
        </el-form-item>
      </el-form>
      <div style="position: relative;width: 100%;" class="pdfBox scroll" v-if="showPdf&&task.isFile&&pdfList[index].length>0" >
        <el-tabs v-model="task.activeTab"  type="card" >
            <el-tab-pane :label="'附件'+(paneIndex+1)" :name="paneIndex.toString()" v-for="(pdfUrl,paneIndex) in pdfList[index]" :key="paneIndex">
              <canvas-preview  :key="paneIndex" :index="paneIndex" :pdf-url="pdfUrl" :flag='flag+index'></canvas-preview>
            </el-tab-pane>
        </el-tabs>
      </div>
      <el-alert style="margin-top: 20px;margin-left: 30px;width: 15%;justify-content: center;" type="warning" title="未上传文件" v-show="pdfList[index]&&pdfList[index].length==0" :closable="false"></el-alert>
    </div>
  </div>
</template>

<script>
  import canvasPreview from "@/components/canvasPreviewPdf.vue"
  export default{
    name:'projectTemplate',
    data(){
      return {

      }
    },
    components:{canvasPreview},
    props:{
      assessInfo:{
        type:Object,
        default:{}
      },
      pdfList:{
        type:Array,
        default:[]
      },
      answerInfoList:{
        type:Array,
        default:[]
      },
      showPdf:{
        type:Boolean,
        default:false
      },
      flag:{
        type:String
      },
      readonly:{
        type:Boolean,
        default:false
      }
    },
    mounted(){
      let count=0
      this.assessInfo.task.map(item=>{
        item.activeTab='0'
        // item.children.map(items=>{
        //   this.$set(items,'answerIndex',count)
        //   count++
        // })
      })
    }
  }
</script>

<style scoped lang="scss">
  .taskBox{
    height: 100%;
    min-height: 500px;
    position: relative;
    >p{
      font-size: 20px;
      font-weight: 500;
    }
  }
  .pdfBox{
    height: 500px;
    overflow: auto;
    margin-top: 30px;
  }
  .scroll {
      overflow: auto;
     }

     .scroll::-webkit-scrollbar {
      width: 4px;
     }

     .scroll::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #444;
     }

     .scroll::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(0 ,0 , 0 , .1 );
     }
   /deep/ .el-tabs__header{
     position: sticky;
     background-color: white;
     top: 0;
     z-index: 2;
   }
</style>
